<template>
  <div class="design-main">
    <div v-show="showTitle">
      <Top />
    </div>
    <div class="design-content">
      <Left
        ref="left"
        :height="height"
        :design-data="designData"
        @pick-result="pickResult"
        @pick-result-text="pickResultText"
        @pick-result-upload="pickResultUpload"
      />
      <div class="part" :style="{ height: height }">
        <Right ref="right" :width="frameWidth" @change-value="changeValue" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, onMounted } from "vue";
import Top from "./components/Top/index.vue";
import Left from "./components/Left/index.vue";
import Right from "./components/Right/index.vue";
import { DesignData, DesignItem } from "./interface";
import { toast } from "vue3-toastify";

interface Props {
  /**
   *  左边款式分类id : { ...数据 ,   select : { 款式id : {...数据 } } }
   */
  designData?: { [key: number | string]: DesignData };
  showTitle?: boolean;   //显示标题
  frameWidth?: number;    //显示单个选项宽度数字百分百比
  height?: string;         //选项高度
}
const right = ref<InstanceType<typeof Right>>();
const left = ref<InstanceType<typeof Left>>();

const { designData } = withDefaults(defineProps<Props>(), {
  designData: () => {
    return {};
  },
  frameWidth: 23,
  showTitle: true,
  height: `2.1615rem`,
});
const designDataValues: DesignData = Object.values(designData)[0];

const changeValue = (value: number | File | string | undefined) => {
  left.value?.setValue(value);
};

const pickResult = (
  items: { [key: number]: DesignItem } | undefined,
  value: number | string | undefined
) => {
  if(items) right.value?.initNormal(items, value);
};

const pickResultText = (value: string | undefined) => {
  right.value?.initText(value);
};

const pickResultUpload = (value: File | undefined) => {
  right.value?.initUpload(value);
};
onMounted(() => {
  // if (!designDataValues) return;
  // switch (designDataValues.type) {
  //   case undefined:
  //   case "normal":
  //     pickResult(
  //       designDataValues.select ? designDataValues.select : [],
  //       typeof designDataValues.value === "number"
  //         ? designDataValues.value
  //         : undefined
  //     );
  //     break;
  //   case "text":
  //     pickResultText(
  //       typeof designDataValues.value === "string"
  //         ? designDataValues.value
  //         : undefined
  //     );
  //     break;
  //   case "upload":
  //     pickResultUpload(undefined);
  //     break;
  // }
});

const checkData = (): boolean => {
  let data = left.value?.getData();
  if (!data) {
    toast.error(`数据错误`);
    return false;
  } else {
    for (let key in data) {
      if (!data[key].value && data[key].required) {
        toast.error(`必选项${data[key].title}未选择`);
        return false;
      }
    }
  }
  return true;
};
defineExpose({ checkData });
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
